<template>
	<view class="wrap">
		<template v-if="vuex_token">
			<view v-if="goodsList.length > 0" class="cartGoodsList u-p-b-80">
				<view class="cartGoods u-flex u-p-15" v-for="goods in goodsList" :key="goods.id">
					<view>
						<u-checkbox v-model="goods.is_checked?true:false" :name="goods.id" @change="checkChange"
							size="40" shape="circle"></u-checkbox>
					</view>
					<view class="goodsInfo u-flex u-p-10">
						<view @tap='jump(`/pages/goods/show`,goods.bookId)'>
							<u-image border-radius="15" width="200rpx" height="200rpx" :src="vuex_user.store +goods.book.img">
							</u-image>
						</view>
						<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
							<view class="priceNum" @tap='jump(`/pages/goods/show`,goods.bookId)'>
								<text class="title u-p-l-10 u-font-28">{{goods.book.name}}</text>
								<br>
								<view class="u-text-right small">
									库存:<text style="color:red">{{goods.book.count}}</text>
								</view>
							</view>
							<view class="priceNum u-flex u-row-between">
								<text class="price u-font-34"><text style="font-size: 25rpx;">￥</text>{{goods.book.price}}</text>
								<u-number-box v-model="goods.count" :min="1" :max="goods.book.count" :index="goods.id"
									@change="numChange"></u-number-box>
<!-- 								<u-icon @tap="removeGoods(goods.id)" name="trash" color="#e83333" size="36">
								</u-icon>
 -->							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty text="购物车空空如也" mode="car"></u-empty>
			</view>
			<view class="bottomFixed u-flex u-p-15">
				<view class="u-flex u-flex-5">
					<view>
						<u-checkbox v-model="allCheck" size="40" shape="circle">全选</u-checkbox>
					</view>
					<view>
						<u-button class="u-flex-2" @click="toDeleteArr" type="error" size="mini" :ripple="true"  shape="square" :disabled="!checkArr.length>0 ">删除</u-button>
					</view>
				</view>
				<view class="u-flex u-flex-7 u-row-between  ">
					<view class="u-flex-5 u-text-right u-m-r-10 ">
						<text class="title">合计:</text>
						<text class="price">￥{{totalPrice | rounding}}</text>
					</view>
					<u-button class="u-flex-2" @click="toPayOrder" type="warning" size="mini" :ripple="true" shape="square" :disabled="!checkArr.length>0 ">去结算</u-button>
				</view>
			</view>
		</template>
		<template v-else>
			<u-empty text="暂未登入" mode="permission"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				pageNum:1,
				totalPage:0,
				total:0,
				
				checkArr:[],
			};
		},
		
		onShow() {
			if (this.vuex_token) {
				this.getCartGoods()
			}
		},
		computed: {
			// 全选和全不选判断
			allCheck: {
				get() {
					if(this.goodsList.length==0){
						return false
					}
					return this.goodsList.every((goods) => {
						return goods.is_checked
					})
				},
				set(val) {
					this.checkApi(val)
				}
			},
			// 选中商品的总价
			totalPrice() {
				return this.goodsList.filter((goods) => { //过滤掉没有选中商品
					if (goods.is_checked) {
						return true
					}
				}).reduce((pre, goods) => { //价格累加
					return parseFloat(pre) + parseFloat(goods.book.price) * goods.count //乘商品数量
				}, 0)
			}
		},
		onReachBottom(){
			if(this.pageNum+1 <= this.totalPage){
				this.pageNum = this.pageNum + 1
				this.getCartGoods()
			}
			
		},
		methods: {
			// 选中删除
			async toDeleteArr(){
				if(this.checkArr.length>0){
					const params = {
						ids : this.checkArr.join()
					}
					const res = await this.$u.api.mulDelCartGoods(params)
					if(res == null){
						this.$u.toast("移出购物车成功")
						this.total = 0
						this.getCartGoods()
					}
					
					
				}else{
					this.$u.toast("请勾选要删除的宝贝哟")
					
				}
			},
			//跳转支付页面
			toPayOrder(){
				if(this.checkArr.length>0){
					this.$u.route({
						url:'/pages/order/order',
						// params:this.$u.queryParams(this.checkArr, true, 'brackets')
						params:{
							arr: this.checkArr
							}
					})
				}else{
					this.$u.toast("您还没选择宝贝哦")
					
				}
				
			},
			
			// 商品详情跳转
			jump(url, id) {
				this.$u.route({
					url,
					params: {
						id
					}
				})
			},
			// 获取购物车内商品
			async getCartGoods() {
				const params = {
					pageNum:this.pageNum
				}
				// console.log(params)
				
				const res = await this.$u.api.cartGoods(params)
				this.total = res.total
				this.totalPage = res.totalPage
				// console.log("this.goodsList.length   "+this.goodsList.length)
				// console.log("this.total   "+this.total)
				if(this.goodsList.length != this.total ){
					this.goodsList = []
					this.goodsList.push(...res.list)
					// this.goodsList =  [...this.goodsList,...res.list]
					// console.log(res)
					
					for (var i = 0; i < this.goodsList.length; i++) {
						this.goodsList[i].is_checked = false
					}
					
				}
				
				
			},
			// 商品数量改变
			async numChange(val) {
				// 通过设置index获取（购物车商品的id）既val中第二参数
				const {
					value,
					index
				} = val
				// console.log(val)
				if(value==1){
					this.$u.toast("最少购买1件哦！")
				}
				const params={
					count:value
				}
				
				await this.$u.api.numChange(index, params)
				
			},
			// 移出购物车
			async removeGoods(id) {
				
				// delCartGoods
				const res = await this.$u.api.delCartGoods(id)
				if(res == null){
					// 删除商品后进行提示   再次调用获取商品列表
					this.$u.toast("移出购物车成功")
					this.total = this.total-1
					this.getCartGoods()
				}
				
			},
			// 单个商品是否选中
			async checkChange(val) {
				
				const {
					value,
					name
				} = val
				
				//深度克隆 goodList
				let copyList = []
				copyList = this.$u.deepClone(this.goodsList);
				for (var i = 0; i < copyList.length; i++) {
					if(copyList[i].id == name){
						copyList[i].is_checked = value
						
					}
					
				}
				if(value==true){
					this.checkArr.push(name)
				}else{
					for(var i = 0; i < this.checkArr.length; i++) {
						if(this.checkArr[i] == name){
							
							this.checkArr.splice(i,1)
						}
					}
				}
				this.goodsList = copyList
				
				console.log(this.checkArr)
				
			},
			// 全选与全不选接口调用
			async checkApi(val) {
				this.checkArr = []
				
				let copyList = []
				copyList = this.$u.deepClone(this.goodsList);
				for (var i = 0; i < copyList.length; i++) {
					copyList[i].is_checked = val
					if(val==true){
						this.checkArr.push(copyList[i].id)
					}
				}
				this.goodsList = copyList
				console.log(this.checkArr)
				
			 },

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 80vh;
		.empty {
			height: 80vh;
		}

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title,
		.price {
			font-weight: 800;
		}

		.price {
			color: #e83333;
			
		}

		.cartGoodsList {
			.cartGoods {
				
				.goodsInfo {
					border-radius: 20rpx;
					box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
					width: 100%;
					background-color: rgb(251, 250, 251);

					.goodsBaseInfo {
						width: 100%;
						height: 200rpx;
						flex-direction: column;

						.priceNum {
							width: 100%;

						}
					}
				}
			}
		}

		.bottomFixed {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
		}

		/*#ifdef H5*/
		.bottomFixed {
			bottom: 100rpx;
		}

		/*#endif*/
		/*#ifdef APP*/
		.bottomFixed {
			bottom: 0rpx;
		}
		
		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			// z-index: 99999;
		}

		/*#endif*/

	}
</style>
